<template>
  <div>
    <ul>
      <div class="erda">
        <p>当前等位城市:</p>
        <h5>北京</h5>
        <router-link
          class="jiantou"
          :to="'/homeWork1?biao=' + '北京'"
          tag="span"
          >></router-link
        >
      </div>
      <div class="disan">
        <p>热门城市</p>
        <router-link
          :to="'/homeWork1?biao='+i.name"
          v-for="(i, item) in arrremen"
          :key="item"
          tag="strong"
        >
          {{ i.name }}
        </router-link>
      </div>

      <li v-for="(i, item) in arrdiqu" :key="item">
        <p class="p1">{{ arrdiqu[item].k }}(按照字母排序)</p>
        <router-link
          :to="'/homeWork1?biao=' + i.name"
          v-for="(i, item) in arrdiqu[item].list"
          :key="item"
          tag="span"
        >
          {{ i.name }}
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      arr: [],
      arrdiqu: [],
      arrremen: [],
    };
  },
  mounted() {
    axios.get("http://elm.cangdu.org/v1/cities?type=group").then((res) => {
      var arrdiqu = []
      for(var key in res.data){
      arrdiqu.push({k:key,list:res.data[key]});
      }
      console.log(arrdiqu.length)
      var c;
      for(var i=0;i<arrdiqu.length;i++){
        for(var j=0;j<arrdiqu.length-1;j++){
          if(arrdiqu[j].k>arrdiqu[j+1].k){
          c = arrdiqu[j]
          arrdiqu[j] = arrdiqu[j+1]
          arrdiqu[j+1] = c 
          }
        }
      }
      this.arrdiqu = arrdiqu 
      console.log(this.arrdiqu)

    });
    axios.get("http://elm.cangdu.org/v1/cities?type=hot").then((res) => {
      this.arrremen = res.data;
    });
  },
};
</script>
<style scoped>
.p1 {
  background: #ccc;
}
* {
  margin: 0;
  padding: 0;
}
.erda {
  width: 100%;
}
.disan {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
ul,
li {
  list-style: none;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
p {
  width: 100%;
}
span {
  display: flex;
  align-items: center;
  width: 25%;
}
strong {
  width: 25%;
}
ul {
  position: relative;
}
h5 {
  float: left;
}
.jiantou {
  float: right;
  margin-left: 100px;
}
</style>
